{% assign data = section.settings %}
{% capture container %}
    {%- if data.is_fill -%}
        full_container_wrapper
    {%- else -%}
        container_wrapper
    {%- endif -%}
{% endcapture %}

{% assign blockId = block_id | default : section.block_id %}

<div class="block_gallery">
  <div class="{{ container }} relative public_swiper_nav_button">
    <div class="block_title_custom text-center">
      {%- if data.block_title != '' and data.block_title -%}
        <h2 class="flex items-center justify-center">
            <svg class="mr-[14px]" width="20" height="20" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-instagram fa-w-14 fa-7x"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" class=""></path></svg>
          <span>{{ data.block_title }}</span>
        </h2>
      {%- endif -%}
      {%- if data.block_detail != '' and data.block_detail -%}
        <div class="block_detail">{{ data.block_detail|html_content_filter }}</div>
      {%- endif -%}
    </div>
    <div class="swiper overflow-hidden" id="swiper-{{ blockId }}">
      <ul class="swiper-wrapper">
        {% for block in section.blocks %}
          <li class="swiper-slide">
            <a href="{{ block.link | setUrlDataFrom:data_from }}" class="inline-flex overflow-hidden">
              {% include 'lazy_img', src: block.image.src, alt: block.image.alt, class: 'w-full object-cover' %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="swiper-pagination relative mt-[30px] md:hidden block" id="swiper-pagination-{{ blockId }}"></div>

    {% if data.btn_text != '' %}
        <div class="btn_wrap text-center mt-[30px]">
            <a href="{{ data.link | setUrlDataFrom:data_from }}" class="public_btn">{{ data.btn_text }}</a>
        </div>
    {% endif %}

    <div class="swiper-button-prev" id="swiper-button-prev-{{ blockId }}">
      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
      </svg>
    </div>
    <div class="swiper-button-next" id="swiper-button-next-{{ blockId }}">
      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
      </svg>
    </div>
  </div>
</div>

<script>
  $(function () {
    let isMobile = moi.isMobile()
    let swiper = new Swiper('#swiper-{{ blockId }}', {
      slidesPerView: isMobile ? '{{ data.yd_number }}' : '{{ data.pc_number }}',
      slidesPerGroup: isMobile ? '{{ data.yd_number }}' : '{{ data.pc_number }}',
      speed: 1000,
      spaceBetween: 5,
      autoHeight: true,
      navigation: {
        nextEl: '#swiper-button-next-{{ blockId }}',
        prevEl: '#swiper-button-prev-{{ blockId }}',
      },
      pagination: {
        el: '#swiper-pagination-{{ blockId }}',
        clickable: true,
      }
    })

    $(`#swiper-{{blockId}} .swiper-slide`).each(function () {
      const element = this;
      const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          swiper.update();
        }
      });
      resizeObserver.observe(element);
    });
  });
</script>

{% schema %}
{
  "class": "block_gallery",
  "is_global": false,
  "icon": "icon-lunbotu",
  "name": {
    "zh_CN": "画廊",
    "en_US": "gallery"
  },
  "max_blocks": 20,
  "blocks": [
    {
      "name": {
        "zh_CN": "画廊",
        "en_US": "gallery"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "图片",
            "en_US": "Image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应",
            "en_US": "Recommended width more than 1000px, height adaptive"
          },
          "id": "image"
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接",
            "en_US": "Jump link"
          },
          "default": {
            "type": "",
            "title": "",
            "url": ""
          },
          "id": "link"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": "false"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "",
      "id": "block_title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述",
        "en_US": "Description"
      },
      "id": "block_detail",
      "default": ""
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "6",
      "min": "3",
      "label": {
        "zh_CN": "PC每排数量",
        "en_US": "PC number per row"
      },
      "default": "5"
    },
    {
      "type": "card_slider",
      "id": "yd_number",
      "max": "2",
      "min": "1",
      "label": {
        "zh_CN": "移动端每排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "default": "2"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "按钮文字",
        "en_US": "Button text"
      },
      "id": "btn_text",
      "default": "Shop Now"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "跳转链接",
        "en_US": "Jump link"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "link"
    },
    {
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
  ],
  "default": {
    "settings": {
      "is_fill": false,
      "block_title": "#ELLA ON INSTAGRAM",
      "block_detail": "Phasellus lorem malesuada ligula pulvinar commodo maecenas",
      "pc_number": "5",
      "yd_number": "2",
      "btn_text": "View Gallery",
      "link": {
        "type": "",
        "title": "",
        "url": ""
      }
    },
    "blocks": [
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      },
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
